<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: cyrus
  Date: 2021/04/10
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加</title>
    <%@include file="../../include/include.jsp" %>
    <style>
        .layui-form-checkbox span {
             height: auto;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">

                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>

                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" autocomplete="off"
                           class="layui-input">
                </div>

                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为您唯一的登入名
                </div>

            </div>


            <div class="layui-form-item">
                <label for="nickname" class="layui-form-label">
                    <span class="x-red">*</span>昵称</label>
                <div class="layui-input-inline">
                    <input type="text" id="nickname" name="nickname" required="" lay-verify="nickname"
                           autocomplete="off" class="layui-input"></div>
            </div>


            <%--            <div class="layui-form-item">--%>
            <%--                <label for="password" class="layui-form-label">--%>
            <%--                    <span class="x-red">*</span>密码</label>--%>
            <%--                <div class="layui-input-inline">--%>
            <%--                    <input type="password" id="password" name="password" required="" lay-verify="password"--%>
            <%--                           autocomplete="off"--%>
            <%--                           class="layui-input"></div>--%>
            <%--                <div class="layui-form-mid layui-word-aux">6到16个字符</div>--%>
            <%--            </div>--%>

            <%--            <div class="layui-form-item">--%>
            <%--                <label for="repassword" class="layui-form-label">--%>
            <%--                    <span class="x-red">*</span>确认密码</label>--%>
            <%--                <div class="layui-input-inline">--%>
            <%--                    <input type="password" id="repassword" name="repassword" required="" lay-verify="repassword"--%>
            <%--                           autocomplete="off" class="layui-input"></div>--%>
            <%--            </div>--%>

            <div class="layui-form-item">
                <label for="mobile" class="layui-form-label">
                    <span class="x-red">*</span>角色选择</label>
                <div class="layui-input-inline">
                    <c:forEach items="${allRoles}" var="role">
                        <input type="checkbox" name="roleList" title="${role.roleName}" value="${role.roleId}"
                               lay-skin="primary">
                    </c:forEach>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="mobile" class="layui-form-label">
                    <span class="x-red">*</span>手机号</label>
                <div class="layui-input-inline">
                    <input type="text" id="mobile" name="mobile" required="" lay-verify="mobile"
                           autocomplete="off" class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="birthday" name="birthday">
                </div>
            </div>


            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
            </div>
        </form>
    </div>
</div>
<script>

    layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#birthday',
            trigger: "click",
            done(value, date, endDate) {
                $("#birthday").val(value);
            }
        });


        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            // nickname: function (value) {
            //     if (value.length < 5) {
            //         return '昵称至少得5个字符啊';
            //     }
            // },
            // password: [/(.+){6,12}$/, '密码必须6到12位'],
            // repassword: function (value) {
            //     if ($('#password').val() != $('#repassword').val()) {
            //         return '两次密码不一致';
            //     }
            // }
        });

        //监听提交
        form.on('submit(add)',
            function (data) {
                console.log(data);
                //发异步，把数据提交给php
                // roleList 前端传递过去的json结构要和后端的实体类对应上
                //     [{roleId:1}]

                // 构造这个已选择的角色的数组

                // 在input框上，点击事件，每次点击的时候把数据添加到数组，取消选择的时候在删除掉
                // 提交获取所有的选中的属性的就行， jquery属性选择器
                var selectRoleElList = $("input[name='roleList']:checked")
                var roleList = [];

                // let const
                for (var item of selectRoleElList) {
                    roleList.push({roleId:item.value})
                }
                data.field.roleList = roleList;

                $.ajax({
                    type: "POST",
                    url: "${ctx}/user/add",
                    data: JSON.stringify(data.field),
                    // 设置请求头为json格式
                    contentType: "application/json;charset=utf-8",
                    success(res) {
                        console.log(res)
                        if (res.success) {
                            layer.alert("增加成功", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        } else {
                            layer.alert(res.msg)
                        }

                    }
                })
                return false;
            });

    });</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>
</html>
